<template>
  <div class="card table-search">
    <ElForm ref="formRef" :model="searchParam" :inline="true" style="min-height: 48px">
      <ElRow>
        <slot name="searchColumn" :search-param="searchParam">
          <ElFormItem v-for="(column, index) in columns" :key="column.prop" :index="index" :label="`${column.label} :`">
            <component v-model="searchParam[column.prop]" :is="getComp(column)" v-bind="getElProps(column)"></component>
          </ElFormItem>
        </slot>
        <ElFormItem>
          <div style="display: flex">
            <ElButton @click="reset">
              <template #icon><Icon icon="refresh"></Icon></template> 重置
            </ElButton>
            <ElButton type="primary" @click="search">
              <template #icon><Icon icon="search"></Icon></template>搜索
            </ElButton>
          </div>
        </ElFormItem>
      </ElRow>
    </ElForm>
  </div>
</template>
<script setup lang="ts" name="SearchForm">
import { PropType } from "vue";
import type { Component } from "vue";
import { ElForm, ElRow, ElFormItem, ElButton } from "element-plus";
import { Icon } from "@/components/Icon";
import { useCom } from "@/components/Form";
import { ColumnProps } from "../../type";
import { ComType } from "@/components/Form/type";

defineProps({
  columns: {
    type: Object as PropType<ColumnProps[]>
  },
  searchParam: {
    type: Object
  },
  search: {
    type: Function
  },
  reset: {
    type: Function
  }
});
const getComp: Component = column => {
  let el: ComType | Component | undefined = column.search.el;
  if (!el) {
    el = "input";
  }
  if (typeof el === "string") {
    const com = useCom(el);
    if (!com) {
      throw new Error("组件名" + el + "不存在");
    }
    el = com;
  }
  return el;
};
const getElProps = column => {
  return { clearable: false, ...column.search.elProps };
};
</script>
